<template>
  <el-input
    size="small"
    v-model="searchParams.userName"
    placeholder="搜索关键字"
    style="width: 300px"
  >
  </el-input>
  <el-button
    type="primary"
    style="margin-left: 5px"
    size="small"
    @click="searchList"
    >搜索</el-button
  >
  <el-button size="small" @click="rest">重置</el-button>
  <el-table
    :data="userList"
    style="width: 100%; height: 100%; margin-top: 10px"
  >
    <el-table-column label="用户名" align="center" prop="username" />
    <el-table-column label="头像" align="center" prop="avatarUrl" width="100">
      <template v-slot="scope">
        <el-avatar
          :src="$apiImg+scope.row.avatarUrl"
          :width="50"
          :height="50"
        ></el-avatar>
      </template>
    </el-table-column>
    <el-table-column label="邮箱" align="center" prop="email" />
    <el-table-column label="昵称" align="center" prop="nickname" />
    <el-table-column label="电话" align="center" prop="phone" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" size="small" @click="editRow(scope.$index)"
          >编辑</el-button
        >
        <el-button type="danger" size="small" @click="deleteRow(scope.$index)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <el-dialog v-model="dialogFormEVisible" title="个人信息" :lock-scroll="false">
    <el-form
      ref="userForm"
      :model="formData"
      label-position="right"
      label-width="80px"
    >
      <el-upload
        class="avatar-uploader"
        :action="$apiImg+'/api/user/uploadAvatar?username=' + formData.username"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
      >
        <img
          v-if="formData.avatarUrl"
          :src="$apiImg+formData.avatarUrl"
          class="avatar"
        />
        <el-icon class="el-icon--upload" v-else><UploadFilled /></el-icon>
      </el-upload>
      <el-form-item label="用户名" prop="username">
        <el-input
          v-model="formData.username"
          placeholder="请输入用户名"
        />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="formData.email" placeholder="请输入用户邮箱" />
      </el-form-item>
      <el-form-item label="昵称" prop="email">
        <el-input v-model="formData.nickname" placeholder="请输入用户昵称" />
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="formData.phone" placeholder="请输入用户手机号" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          v-model="formData.password"
          placeholder="请输入用户密码"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即保存</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <!-- 分页 -->
  <el-pagination
    style="margin-top: 10px"
    v-model:current-page="searchParams.currentPage"
    v-model:page-size="searchParams.pageSize"
    :page-sizes="[5, 10, 15, 20]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="parseInt(total)"
    @size-change="searchList"
    @current-change="searchList"
  />
</template>

<script>
import { userListApi,saveApi, delUserApi } from '@/api/system/userlist'
import { reactive, toRefs } from 'vue'
import { ElMessage } from 'element-plus'
export default {
  setup() {
    const data = reactive({
      searchParams: {
        currentPage: 1,
        pageSize: 5,
        userName: '',
      },
      dialogFormEVisible: false,
      formData:{},
      total: '',
      userList: [],
    })
    const searchList = () => {
      userListApi(data.searchParams).then((res) => {
        if (res.data) {
          data.userList = res.data.data
          data.total = res.data.total
        }
      })
    }
    const rest = () => {
      data.searchParams.userName = ''
    }
    const editRow = (index) => {
      data.dialogFormEVisible = true
      data.formData = data.userList[index]
    }
    const onSubmit = () => {
      saveApi(data.formData).then((detail) => {
        if (detail.data) {
          ElMessage({
            message: '修改成功',
            type: 'success',
            duration: 2000
          })
        } else {
          return null
        }
        data.dialogFormEVisible= false
      })
    }
    const deleteRow=(index)=> {
      delUserApi({userId:data.userList[index].id}).then((res)=>{
        if(res&&(data.userList.splice(index, 1))){
          ElMessage({
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
        }
      })
    }

    searchList()
    return {
      ...toRefs(data),
      searchList,
      rest,
      editRow,
      onSubmit,
      deleteRow
    }
  },
  methods:{
    handleAvatarSuccess(res) {
      if (res) {
        ElMessage({
          message: '修改成功',
          type: 'success',
          duration: 2000
        })
        this.formData.avatarUrl = res.data.avatarUrl
      }
    }
  }
}
</script>
<style lang="scss" scoped>

.avatar-uploader {
  text-align: center;
  padding-bottom: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #000000;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 138px;
  height: 138px;
  line-height: 138px;
  text-align: center;
}
.avatar {
  width: 138px;
  height: 138px;
  border-radius: 50%;
  display: block;
}
</style>
